<template>
  <div style="min-width: 1200px">
    <div v-if="$route.path == '/memberAnalysis'">
      <div class="vs-search-box">
        <div class="vs-search-title">会员数据分析</div>
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="门店">
            <el-select v-model="paging.store_id" placeholder="请选择">
              <el-option
                v-for="item in shopList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期：">
            <el-date-picker
              @change="setDate($event, 1)"
              v-model="value1"
              value-format="yyyy-MM-dd"
              style="width: 250px"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
            <el-button
              icon="el-icon-download"
              @click="exportFile()"
              :loading="isExport"
              >导出</el-button
            >
          </el-form-item>
        </el-form>
        <el-checkbox-group
          v-model="checkboxGroup"
          size="medium"
          class="select-top"
        >
        </el-checkbox-group>
        <div
          ref="ratio"
          style="width: 100%; height: 400px"
          class="total-number-tu"
        ></div>
        <div>
          <el-table
            :data="tableData"
            header-row-class-name="has-gutter-table"
            style="width: 100%"
          >
            <el-table-column type="index" label="序号"> </el-table-column>
            <el-table-column
              prop="start_time"
              label="开始日期"
            ></el-table-column>
            <el-table-column prop="end_time" label="截止日期">
            </el-table-column>
            <el-table-column prop="newCount" label="开卡数量">
            </el-table-column>
            <el-table-column prop="newPrice" label="开卡金额">
            </el-table-column>
            <el-table-column prop="addCount" label="续充数量">
            </el-table-column>
            <el-table-column prop="addPrice" label="续充金额">
            </el-table-column>
            <el-table-column prop="userSum" label="卡内所剩金额">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      isExport: false,
      checkboxGroup: [],
      form: {
        username: "",
        date: "",
      },
      paging: {
        username: "", //姓名
        store_id: 0,
        start_time: "", //开始时间
        end_time: "", //结束时间
        page: 1,
        total: 0,
        limit: 10,
      },
      shopList: [], //获取门店信息
      performance: [], //门店业绩比率
      test: [], //门店业绩时间
      achievemen: [], //业绩完成率
      turnove: [], //营业额增长率
      technician: [], //技师点钟率

      results: [], //会员比率
      increas: [], //会员增长率
      conversio: [], //会员转化率
      drai: [], //会员流失率

      employees: [], //员工比率
      inductio: [], //入职员工比率
      qui: [], //离职员工比率
      tableData: [],
      source: [],
      dataConte:[],
    };
  },

  created() {
    let date1 = this.getCurrentMonthFirst();
    let date2 = this.getCurrentMonthLast();
    this.getStoreRatio();
    this.paging.start_time = date1;
    this.paging.end_time = date2;
    this.homegetStore();
    // 页面赋值
    this.value1 = [date1, date2];
  },
  async mounted() {},

  methods: {
    async exportFile() {
      this.isExport = true;
      let res = await this.$Http.exportUserVip(this.paging);
      this.utils.downloadXlsx(res, "会员数据分析");
      this.isExport = false;
    },
    async homegetStore() {
      //获取门店
      let { code, data } = await this.$Http.homegetStore();
      if (code) {
        let obj = {
          id: 0,
          title: "全部",
        };
        this.shopList = [obj, ...data];
      }
    },
    getCurrentMonthFirst() {
      //获取当月第一天的值
      var date = new Date();
      date.setDate(1);
      var month = parseInt(date.getMonth() + 1);
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return date.getFullYear() + "-" + month + "-" + day;
    },
    getCurrentMonthLast() {
      //获取当月最后一天的值
      var date = new Date();
      var currentMonth = date.getMonth();
      var nextMonth = ++currentMonth;
      var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
      var oneDay = 1000 * 60 * 60 * 24;
      var lastTime = new Date(nextMonthFirstDay - oneDay);
      var month = parseInt(lastTime.getMonth() + 1);
      var day = lastTime.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return date.getFullYear() + "-" + month + "-" + day;
    },
    setDate(e) {
      this.paging.start_time = e[0];
      this.paging.end_time = e[1];
    },
    async getStoreRatio() {
      //会员分析
      let { code, data } = await this.$Http.getUserVip(this.paging);
      if (code) {
        this.performance = data.days;
        if (this.performance != undefined) {
          let arr = [];
          let product = [
            "product",
            "会员卡剩余金额",
            // "会员开卡数量",
            "会员开卡金额",
            // "会员续充数量",
            "会员续充金额",
          ];
          this.performance.forEach((item) => {
            item.userSum = !item.userSum ? 0 : item.userSum;
            item.newCount = !item.newCount ? 0 : item.newCount;
            item.newPrice = !item.newPrice ? 0 : item.newPrice;
            item.addPrice = !item.addPrice ? 0 : item.addPrice;
            item.addCount = !item.addCount ? 0 : item.addCount;
            let source = [];
            let day = item.day.split("-");
            let days = day[1] + "-" + day[2];
            source.push(days);
            source.push(item.userSum);
            this.dataConte.push([item.newCount,item.addCount]);
            // source.push(item.newCount);
            source.push(item.newPrice);
            // source.push(item.addCount);
            source.push(item.addPrice);
            arr.push(source);
          });
          this.source = [product, ...arr];
          this.init1();
        } else {
          this.source = [];
          this.init1();
        }
        this.tableData = [data.lists];
        // this.tableData = [];
      }
    },
    handleCurrentChange() {
      this.getStoreRatio();
    },
    async init1() {
      //第一幅图
      //门店业绩比率
      console.log(this.source,'this.source');
      let ratio = this.$echarts.init(this.$refs.ratio);
      ratio.setOption({
        legend: {},
        dataset: {
          source: this.source,
        },
        tooltip: {
          trigger: "item",
          formatter: (params, ticket, callback)=> {
            // 获取年份
            let date = new Date();
            let year = date.getFullYear(date);
            var res =
              "" +
              year +
              "-" +
              params.data[0] +
              "<br/>" +
              "会员卡剩余金额: " +
              params.data[1] +
              "<br/>" +
              "会员开卡数量: " +
              this.dataConte[params.dataIndex][0] +
              "<br/>" +
              "会员开卡金额: " +
              params.data[2] +
              "<br/>" +
              "会员续充数量: " +
              this.dataConte[params.dataIndex][1] +
              "<br/>" +
              "会员续充金额: " +
              params.data[3];
            //使用for可以将需要的数据全部加到res
            //注意下边的<br/>
            // for (var i = 0, l = params.length; i < l; i++) {
            //   res += "<br/>" + params[i].seriesName + " : " + params[i].value;
            // }
            return res;
          },
        },
        xAxis: { type: "category" },
        yAxis: {},
        series: [
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
        ],
      });
      window.onresize = function () {
        ratio.resize();
      };
    },
  },
};
</script>